<template>
	<div>
		<!-- Suspense:异步加载组件，异步请求数据 -->
		<Suspense>
			<!-- 插槽 #default-->
			<template #default>
				<A></A>
				<!-- <div ref="target"><A v-if="targetIsVisible"></A></div> -->
			</template>
			<!-- 插槽 #default-->
			<template #fallback>
				加载中...
			</template>
		</Suspense>

		<B></B>

		<div ref="target">
			<!-- Suspense:异步加载组件，异步请求数据 -->
			<Suspense v-if="targetIsVisible">
				<!-- 插槽 #default-->
				<template #default>
					<C></C>
					<!-- <div ref="target"><A v-if="targetIsVisible"></A></div> -->
				</template>
				<!-- 插槽 #default-->
				<template #fallback>
					加载中...
				</template>
			</Suspense>
		</div>

		<!-- <div ref="target"><C v-if="targetIsVisible"></C></div> -->
	</div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';
// 实现了异步引入组件
import { useIntersectionObserver } from '@vueuse/core';
const A = defineAsyncComponent(() => import('@/components/Dyna_A.vue'));
import B from '@/components/Dyna_B.vue';
const C = defineAsyncComponent(() => import('@/components/Dyna_C.vue'));

const target = ref(null); //target就是DOM
const targetIsVisible = ref(false);
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
	console.log(isIntersecting); //isIntersecting==>true||false
	if (isIntersecting) {
		targetIsVisible.value = isIntersecting;
	}
});
</script>

<style></style>
